<template>
    <div>
        <headNav :isBack="isBack" :isHome="isBack" title="党费" ></headNav>
        <div class="moneyTit">
            <div class="moneyCount">
                <p>{{userData.totalPay}}元</p>
                <h2>已缴</h2>
            </div>
            <div class="moneyCount">
                <p>{{userData.totalUnPay}}元</p>
                <h2>待缴</h2>
            </div>
        </div>
        <!-- 党费列表 -->
        <div class="tableContent">
            <div class="menberList" v-loadmore="loadmore">
                <ul>
                    <li v-for="(item,index) in duesList" :key="index">
                        <img class="jiaoType" v-if="item.payState == 1" src="@/assets/img/classExpense/type-11.png" alt="">
                        <img class="jiaoType" v-else src="@/assets/img/classExpense/type-10.png" alt="">
                        <div class="listTit">
                            <span>{{item.month}}月党费</span>
                            <img class="courseNew" v-if="!item.read" src="@/assets/img/classExpense/type-7.png" alt="">
                        </div>
                        <div class="liItem"><img class="timeImg" src="@/assets/img/classExpense/time-1.png" alt=""> {{item.createTime}}</div>
                        <div class="liItem">应缴党费：{{item.currency}}元</div>
                        <div class="jiaoFee" @click="payDues(item)" v-if="item.payState != 1">交党费</div>
                    </li>
                </ul>
                <div class="load-p">
                    <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                    <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import cookie from '@/util/cookie'
import { LoadMore} from 'vux'
import {loginUrl} from '@/config/config'
export default {
    name:'membership',
    components: {
        headNav,
        LoadMore
    },
    data() {
        return {
            isBack: false,
             pageIndex:0,
           pageSize:5,
           isMore:true,
            duesList: [],
            userData: '',
            duesData: '',
            loginUserId: '',
            schoolId: ''

        }
    },
    mounted(){
        this.getDuesData()
        this.getDuesList()
    },
    methods:{
        loadmore () {
            this.getDuesList()
        },
        // /school/api/home/userPartyDuesSettings/userPartyDuesPayStatistics
        // /school/api/home/recordUserPartyDuesPays列表
        // 用户缴费统计
        getDuesData () {
            this.$store.dispatch('dues/UserPartyDuesPayStatistics').then( res => {
                this.userData = res
            })
        },
        // 获取url参数
         getQueryVariable(variable){
                var query = window.location.search.substring(1)
                var vars = query.split("&")
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=")
                        if(pair[0] == variable){return pair[1]}
                }
                return(false)
            },
        // 党费列表 
        getDuesList () {
            if(!this.isMore){
                return
            }
            if (this.getQueryVariable(' loginUserId') && this.getQueryVariable(' schoolId')) {
              this.loginUserId = this.getQueryVariable(' loginUserId')
              this.schoolId = this.getQueryVariable(' schoolId')
               this.isBack = false
            } else {
                this.schoolId = this.$store.getters['user/schoolId']
                this.loginUserId = this.$store.getters['user/loginUserId']
                this.isBack = true
            }
            this.pageIndex++
            var params = {
                SchoolId: this.schoolId,
                LoginUserId: this.loginUserId,
                PageNum: this.pageIndex,
                PageSize: this.pageSize
            }
            this.$store.dispatch('dues/RecordUserPartyDuesPays', params).then( res => {
                if(res.items.length < this.pageSize){
                        this.isMore = false
                    }
                for (var obj of res.items) {
                    obj.month = obj.date.slice(0,7)
                }
                this.duesData = res.items
                this.duesList = this.duesList.concat(res.items)
                this.readSet()
            })
        },
        // 支付党费
        async payDues (item) {
            var params = {
                tradeType: 2,
                openId: cookie.get('OpenId'),
                id: item.id
            }
            try {
                let val = await this.$store.dispatch('dues/Pay', params)
                WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": val.jsapi_appid,     //公众号名称，由商户传入
                "timeStamp":val.jsapi_timestamp,         //时间戳，自1970年以来的秒数
                "nonceStr":val.jsapi_noncestr, //随机串
                "package":val.jsapi_package,
                "signType":val.jsapi_signtype,         //微信签名方式：
                "paySign": val.jsapi_paysign //微信签名
                },
                function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    this.$vux.toast.text('支付成功', 'middle')
                    window.location.href = loginUrl
                } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                    alert('支付已取消')
                    this.$emit('cancel')
                }
                })
            } catch (err) {
                // alert(111111111)
                // alert(JSON.stringify(err))
                if (err == '订单已完成，不能重复支付' || err == '支付成功，不能重复支付') {
                let res = await this.$store.dispatch('dues/RefreshPayState', params)
                this.$vux.toast.text('该订单已支付', 'middle')
                } else {
                this.$vux.toast.text('抱歉，该订单超出微信支付限额', 'middle')
                }
            }
        },
        // 已读 
        readSet () {
            var params = []
            for (var obj of this.duesData) {
                params.push(obj.id)
            }
            this.$store.dispatch('dues/ReadRecordPartyDues', params).then( res => {
            })
        }
    }
}
</script>
<style scoped>
.load-p{
        padding: 1rem 0 0 0;
    }
.moneyTit{
    height: 1.26rem;
    background-color: #ffffff;
    width: 100%;
}
.moneyTit .moneyCount:nth-child(1){
    border-right: 1px solid #E5E5E5;
}
.moneyCount{
    width: 48%;
    text-align: center;
    float: left;
    margin: 0.25rem 0;
}
.moneyCount p{
    font-size: 0.32rem;
    color: #333333;
}
.moneyCount h2{
    font-size: 0.28rem;
    color: #999999;
}
/*  */
.tableContent{
   height: calc(100% - 2.38rem);
}
.menberList{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.menberList li{
    width:6.80rem;
    height:2.14rem;
    background:rgba(255,255,255,1);
    border-radius:0.10rem;
    margin: 0 auto;
    margin-top: 0.24rem;
    position: relative;
}
.listTit{
   line-height: 0.8rem;
   margin-left: 0.24rem;
}
.listTit span{
    font-size: 0.32rem;
    color: #333333;
}
.courseNew{
    width: 0.4rem;
    height: 0.24rem;
}
.jiaoType{
    width: 0.84rem;
    height: 0.51rem;
    position: absolute;
    top: 0;
    right: 0.24rem;
}
.liItem{
    font-size: 0.28rem;
    color: #666666;
    margin-bottom: 0.1rem;
    line-height: 0.46rem;
    margin-left: 0.24rem;
}
.timeImg{
    width: 0.26rem;
    height: 0.26rem;
    float: left;
    margin-top: 0.09rem;
    margin-right: 0.06rem;
}
.jiaoFee{
    position: absolute;
    right: 0;
    top: 1rem;
    margin-top: 0.1rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.6rem;
    font-size: 0.28rem;
    width:1.64rem;
    height:0.60rem;
    background:linear-gradient(-90deg,rgba(31,189,241,1),rgba(31,150,241,1));
    border-radius:0.30rem 0 0 0.30rem;
   }
</style>